<template>
  <div class="box"></div>
  <img id="img" src="" alt="">
</template>

<script setup lang="ts">
// 1. 获取滚动的距离 是否大于图片距离页面顶部的距离
window.addEventListener('scroll', () => {
  // console.log(document.documentElement.scrollTop)
  // console.log(document.querySelector('#img')!.offsetTop)
  // 监听滚动的距离是否大于等于某个临界值  动态的给图片设置src属性
  if (document.documentElement.scrollTop >= 2000) {
    document.querySelector('#img')!.src = 'https://img1.baidu.com/it/u=621421759,3943251443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658595600&t=e0687c5655c8ce6f65f8a3d92c7addf9'
  }
})
</script>

<style scoped>
.box {
  height: 3000px;
  background-color: red;
}
</style>